<template>
	<div>
		<Header></Header>
		<div class="background">
			<div class="baidumap address" id="allmap"></div>
			<div class="addressText">
				<ul id="out">
					<li><a>云视车联网络科技有限公司</a></li>
					<li><a>总部：北京XXXXXXX</a></li>
					<li><a>分公司：天津自贸试验区</a></li>
					<li><a>电话：400-8585-666</a></li>
					<li><a>邮箱：ol_public@olecx.com</a></li>
				</ul>
				<div class="address1">
					<div class="officialAccounts">
						<img class="GZH" src="../assets/img/gzh.png">
						<span>官方公众号</span>
					</div>
					<div class="officialAccounts">
						<img class="GZH" src="../assets/img/gzh.png">
						<span>聚控车服</span>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
import Header from './header.vue'
import Footer from './footer.vue'
export default {
    name: 'Bmap',
    components: {
		Header,
        Footer
    },
    mounted(){
      this.baiduMap()
    },
    methods: {
      baiduMap() {
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(117.820528,39.027716) // 创建点坐标
        map.centerAndZoom(point,17) // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl())
        map.addControl(new BMap.ScaleControl())
        map.addControl(new BMap.OverviewMapControl())
        map.addControl(new BMap.MapTypeControl())
        var marker = new window.BMap.Marker(point) // 创建标注
        map.addOverlay(marker) // 将标注添加到地图中
        //提示信息
        var infoWindow = new BMap.InfoWindow('地址：东疆商务中心，9楼')
        // 鼠标移上标注点要发生的事
        marker.addEventListener('mouseover', function() {
          this.openInfoWindow(infoWindow)
        })
        // 鼠标移开标注点要发生的事
        marker.addEventListener('mouseout', function() {
          this.closeInfoWindow(infoWindow)
        })
      }
    }
  }
</script>

<style scoped>
  .address>.BMap_cpyCtrl {
		display:none !important;
  }
  .address>.anchorBL {
    	display:none !important;
  }
  .background{
		margin-top:100px;
		padding-top:50px;
		background-image: url(../assets/img/back.jpg);
		height:580px;
		width:100%;
		background-size: 100% 100%; 
		background-repeat: no-repeat;
		display:flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.address{
		margin-top:30px;
		margin-left:30px;
		width:60%;
		height:70%;
		background-color:white;
		border:1px solid black;
		border-radius: 20px;
	}
	.addressText{
		margin-top:30px;
		margin-right:30px;
		width:30%;
		height:70%;
		background-color:white;
		opacity:0.7;
		border:1px solid black;
		border-radius: 20px;
		color:black;
	}
	.address1{
		margin-right:auto;
		margin-left:auto;
		width:70%;
		height:140px;
		text-align:center;
	}
	.addressText ul{
		width:80%;
		margin-top:30px;
		margin-left:auto;
		margin-right:auto;
	}
	.addressText ul li{
		margin-top:20px;
	}
	.officialAccounts{
		height:120px;
		width:100px;
		float:left;
		margin-top:15px;
		margin-right:20px;
	}
	.GZH{
		height:100px;
		width:100%;
	}
</style>